import { useMemo, useEffect } from 'react'
import { BrowserRouter as Router } from 'react-router-dom'
import i18n from 'i18next'
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles'
import Route from '@/router'
import AuthRouter from '@/router/utils/authRouter'
import { useDispatch, useSelector } from 'react-redux'
import { Dispatch, RootState } from '@/store'

import TablePagination from '@mui/material/TablePagination'
import Autocomplete from '@mui/material/Autocomplete'
import TextField from '@mui/material/TextField'
// import * as locales from '@mui/material/locale'
import { zhCN, enUS } from '@mui/material/locale'
import { LocalesEnum } from '@/types/global.d'
const locales = {
  [LocalesEnum.zhCN]: zhCN,
  [LocalesEnum.enUS]: enUS
}

// type SupportedLocales = keyof typeof locales

function App() {
  const dispatch = useDispatch<Dispatch>()
  const locale = useSelector((state: RootState) => state.app.locale)
  // const [locale, setLocale] = useState<SupportedLocales>(LocalCache.getItem('locale') ?? getBrowserLang())

  const theme = useTheme()

  useEffect(() => {
    // dispatch.app.setLocale(locale)
    i18n.changeLanguage(locale)
  }, [locale])

  const themeWithLocale = useMemo(() => createTheme(theme, locales[locale as LocalesEnum]), [locale, theme])

  return (
    <ThemeProvider theme={themeWithLocale}>
      <Autocomplete
        options={Object.keys(locales)}
        getOptionLabel={(key) => `${key.substring(0, 2)}-${key.substring(2, 4)}`}
        style={{ width: 300, paddingTop: '100px' }}
        value={locale}
        disableClearable
        onChange={(event: any, newValue: string | null) => {
          dispatch.app.setLocale(newValue as LocalesEnum)
          // setLocale(newValue as SupportedLocales)
        }}
        renderInput={(params) => <TextField {...params} label="Locale" fullWidth />}
      />
      <TablePagination count={2000} rowsPerPage={10} page={1} component="div" onPageChange={() => {}} />
      <Router>
        <AuthRouter>
          <Route />
        </AuthRouter>
      </Router>
    </ThemeProvider>
  )
}

export default App
